import { defineComponent } from "vue";
import styles from "./card.module.less";
// 卡片
export const Card = defineComponent({
  name: 'Card',
  setup(props, { slots }) {
    const Card = () => (
      <div class={styles.card}>
        {
          slots.default && slots.default()
        }
      </div>
    )
    return () => (
      <Card />
    )
  },
})
// 卡片(带标题)
export const CardWithTitle = defineComponent({
  name: 'CardWithTitle',
  props: {
    // 标题
    title: {
      type: String,
      default: '',
    },
    // 内容对齐方式
    align: {
      type: String,
      default: 'left',
    }
  },
  setup(props: any, { slots }) {
    let justifyContent = 'flex-start';
    switch (props.align) {
      case 'left':
        justifyContent = 'flex-start';
        break;
      case 'right':
        justifyContent = 'flex-end';
        break;
      case 'center':
        justifyContent = 'center';
        break;
      default:
        justifyContent = 'flex-start';
    }
    const CardWithTitle = () => (
      <Card>
        <div class={styles['card-title-container']}>
          {
            slots.title ? slots.title() : props.title
          }
        </div>
        <div class={styles['card-container']} style={{ justifyContent }}>
          {
            slots.default && slots.default()
          }
        </div>
      </Card>
    )
    return () => (
      <CardWithTitle />
    )
  },
})